

<template>
    <view>
        <view class="border-radio-30 padding-20 bg-white">
            <view class="flex-box fs-28 color-70 type-box">
             <view :class="{'active':(typeIndex==index),'margin-l-20':index  } " @click="getType(index,item)" v-for="(item,index) in typeList" :key="item.id">
                {{item.name}}
             </view>
            </view>
            <view v-if="list && list.length">
                <view class="padding-t-b-30 list-box flex-box flex-1" v-for="item in list" :key="item.id" @click="goDetails(item)">
                    <view class=" border-radio-14 img-box">
                        <image :src="item.image" mode="aspectFill"></image>
                    </view>
                    <view class="flex-column justifyContent-spaceBetween margin-l-20">
                        <view class="fs-28 fw-b color-0 only-2">{{item.title}}</view>
                        <view class=" time-box align-items-center bg-f7 border-radio-14" >
                            <view class="fs-24 color-333">讲座时间：{{item.start_time.substr(0,16)}}</view>
                            <view class="fs-26 color-white bg-43" v-if="!item.is_sign" @click.stop="sign(item)">我要报名</view>
                            <view class="fs-26 color-white bg-db" v-else @click.stop="sign(item)">我要报名</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="bg-white" v-else style="padding: 100rpx 0">
                <u-empty mode="data"></u-empty>
            </view>
        </view>
    </view>
</template>
<script >

export default {
    props: {
        list: {
            type: Array,
            default: () => {
                return []
            }
        },
        typeList: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
  data() {
    return {
        typeIndex:0,

    }
  },
    methods: {
        getType(index,item){
            this.typeIndex = index;
            this.$emit('getType',item, )
        },
        goDetails(item){
            this.$emit('goDetails',item,this.typeIndex)
        },
        initType(){
            this.typeIndex = 0;
        },
        sign(item){
            if (item.is_sign){
                return  uni.showToast({
                    title: '您已报名该讲座',
                    icon: 'none'
                })
            }else {
                this.$emit('sign',item)
            }
        }
    },
}
</script>
<style scoped lang="scss">
@import "common";
.list-box {
    .img-box {
        width: 180rpx;
        height: 180rpx;
        min-width: 180rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .time-box {
        justify-content: space-between;
        height: 70rpx;
        width: 480rpx;
        line-height: 70rpx;
        padding-left: 10rpx;
        .fs-26 {
            width: 146rpx;
            height: 100%;
            text-align: center;
        }
    }
}
</style>